<template>
	<view>
		<uni-search-bar cancelButton="false" 
		  :radius="100" @confirm="search">
		</uni-search-bar>
		<uni-collapse v-for="(list, index) in listData" :key="index"
			class="collapseContent" accordion="true" >
			<uni-collapse-item open showAnimation :title='list.title'>
				<uni-grid v-for="(item, indexJ) in list.item" :key='indexJ'
					@click="handleClick(item.url)"
				  class="hanzhiOrg" :column="2" :show-border="false" :square="false">
					<uni-grid-item>
						<icon-svg :style="{color: item.color}" :icon-class="item.iconClass" />
					</uni-grid-item>
					<uni-grid-item>
						<text class="text">{{item.text}}</text>
					</uni-grid-item>
				</uni-grid>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [
					{
						title: '翰智组',
						item: [
							{
								iconClass: 'feiji',
								text: '借款单',
								color: '#FF6F00',
								url: '/pages/add/loanBill/loanBill'
							},
							{
								iconClass: 'youxiang',
								text: '还款单',
								color: '#FF6F00',
								url: '/pages/add/repayBill/repayBill'
							},
							{
								iconClass: 'youxiang',
								text: '出差申请单',
								color: '#FF6F00',
								url: '/pages/add/travelApplyBill/travelApplyBill'
							},
							{
								iconClass: 'youxiang',
								text: '通用申请单',
								color: '#FF6F00',
								url: '/pages/add/currencyApplyBill/currencyApplyBill'
							},
							{
								iconClass: 'youxiang',
								text: '差旅费报销单',
								color: '#FF6F00',
								url: '/pages/add/travelFreeBill/travelFreeBill'
							},
							{
								iconClass: 'youxiang',
								text: '通用报销单',
								color: '#FF6F00',
								url: '/pages/add/currencyAccount/currencyAccount'
							}						
						],
					}
					// {
					// 	title: '采购报销',
					// 	item: [
					// 		{
					// 			iconClass: 'wenti-shuben',
					// 			text: '报销单1',
					// 			color: '#00ACC1'
					// 		}
					// 	]
					// }
				]
			};
		},
		methods: {
			handleClick(url) {
				console.log(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hanzhiOrg{
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 15px!important;
		.uni-grid-item:nth-of-type(1) {
			width: 10%!important;
			font-size: 22px;
		}
		.uni-grid-item:nth-of-type(2) {
			width: 90%!important;
		}
	}
</style>
